<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:cc="http://java.sun.com/jsf/composite"
      xmlns:p="http://primefaces.org/ui">

    <body>

        <ui:composition template="./TemplatePrincipal.xhtml">

            <ui:define name="top">
               
            </ui:define>

            <ui:define name="left">
                
            </ui:define>

            <ui:define name="content">
                <f:view>
                    <h:form>
                        <p:growl/>
                        <h1><p:outputLabel value="Encabezado del examen"/></h1>
                        <p:panelGrid columns="2">
                            
                        
                            <p:outputLabel value="Veterinario:" for="veterinario" />
                            <p:selectOneMenu id="veterinario" value="#{examBean.exam.veterinario}" title="Veterinario" required="true" requiredMessage="El Veterinario es requerido." >
                                <f:selectItem itemLabel="Selecciona" itemValue="" />
                                <f:selectItems value="#{examBean.listVeterinary}" var="item" itemLabel="#{item}"/>
                            </p:selectOneMenu>
                            
                            <p:outputLabel value="Mascota:" for="idMascota" />
                            <p:selectOneMenu id="idMascota" value="#{examBean.idMascota}" title="IdMascota" required="true" requiredMessage="La Mascota es requerida.">
                                <!-- TODO: update below reference to list of available items-->
                                <f:selectItem itemLabel="Selecciona" itemValue="" />
                                <f:selectItems value="#{petBean.lista}" var="item" itemValue="#{item.id}"/>
                            </p:selectOneMenu>
                        </p:panelGrid>
                     
                      
                        <h1><p:outputLabel value="Ingresa los detalles del examen"/></h1>
                            <p:panelGrid columns="2">
                                <p:outputLabel value="Categoría de examen:" for="categoriaExamen" />
                                <p:selectOneMenu id="categoriaExamen" value="#{examBean.categoriaExamen}" title="CategoriaExamen" required="true" requiredMessage="La Categoría de examen es requerida." >
                                    <f:selectItem itemLabel="Selecciona" itemValue="" />
                                    <f:selectItems value="#{examBean.listCategory}" var="item" itemLabel="#{item}"/>
                                
                                </p:selectOneMenu>
                                
                                 <p:outputLabel value="Tipo de examen:" for="tipoExamen" />
                                 <p:selectOneMenu id="tipoExamen" value="#{examBean.tipoExamen}" title="TipoExamen" required="true" requiredMessage="El Tipo de examen es requerido.">
                                     <f:selectItem itemLabel="Selecciona" itemValue="" />
                                     <f:selectItems value="#{examBean.listTypeExam}" var="item" itemLabel="#{item}"/>
                           
                                 </p:selectOneMenu>
                                
                                <p:outputLabel value="Resultados:" for="resultados" />
                                <p:inputText id="resultados" value="#{examBean.resultados}" title="Resultados" required="true" requiredMessage="El Resultado es requerido." validatorMessage="Formato de Resultados caracteres 200 solo letras, inicio de palabra con o sin Mayuscula">
                                <f:validateLength maximum="200"/>
                                 <f:validateRegex pattern="(([A-Z]+)?[a-z]+\s?)+"/>
                                </p:inputText>
                                <p:outputLabel value="Receta:" for="receta" />
                                <p:inputText id="receta" value="#{examBean.receta}" title="Receta" required="true" requiredMessage="La Receta es requerida." validatorMessage="Formato de Receta caracteres 200 solo letras, inicio de palabra con o sin Mayuscula">
                                <f:validateLength maximum="200"/>
                                 <f:validateRegex pattern="(([A-Z]+)?[a-z]+\s?)+"/>
                                </p:inputText>
                                <p:outputLabel value="Recomendaciones:" for="recomendaciones" />
                                <p:inputText id="recomendaciones" value="#{examBean.recomendaciones}" title="Recomendaciones" validatorMessage="Formato de Recomendaciones caracteres 200 solo letras, inicio de palabra con o sin Mayuscula">
                                <f:validateLength maximum="200"/>
                                 <f:validateRegex pattern="((([A-Z]+)?[a-z]+\s?)+)?"/>
                                </p:inputText>
                                <p:outputLabel value="Medicina Preventiva:" for="medicinaPreventiva" />
                                <p:inputText id="medicinaPreventiva" value="#{examBean.medicinaPreventiva}" title="MedicinaPreventiva" validatorMessage="Formato de Medicina preventiva caracteres 150 solo letras, inicio de palabra con o sin Mayuscula">
                                <f:validateLength maximum="150"/>
                                 <f:validateRegex pattern="((([A-Z]+)?[a-z]+\s?)+)?"/>
                                </p:inputText>
                                
                            </p:panelGrid> 
                        <p:commandButton icon="ui-icon-arrowthickstop-1-s"  actionListener="#{examBean.agregarDetallesDeExamen}" ajax="false"/>
                            </h:form>
                        <h:form>
                            <h1> <h:outputText value="#{examBean.message}" 
                                          style="color: #{examBean.message ? 'black':'red'};"/></h1>
                            <h1><p:outputLabel value="Lista de detalles"/></h1>
                        <p:dataTable value="#{examBean.listDetails}" var="item">
                            
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Tipo de examen"/>
                                </f:facet>
                                <h:outputText value="#{item.tipoExamen}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Categoría de examen"/>
                                </f:facet>
                                <h:outputText value="#{item.categoriaExamen}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Resultados"/>
                                </f:facet>
                                <h:outputText value="#{item.resultados}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Receta"/>
                                </f:facet>
                                <h:outputText value="#{item.receta}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Recomendaciones"/>
                                </f:facet>
                                <h:outputText value="#{item.recomendaciones}"/>
                            </p:column>
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Medicina Preventiva"/>
                                </f:facet>
                                <h:outputText value="#{item.medicinaPreventiva}"/>
                            </p:column>
                            
                            <p:column>
                                <f:facet name="header">
                                    <h:outputText value="Eliminar"/>
                                </f:facet>
                                <p:commandButton icon="ui-icon-trash" actionListener="#{examBean.eliminarDetalle}" ajax="false"/>
                            </p:column>
                             
                       
                        </p:dataTable>
                       
                        <p:commandButton action="#{examBean.procesarAccionParaConfirmar}" 
                                         icon="ui-icon-check" ajax="false"/>
                     
                        <p:commandButton action="ExamList" icon="ui-icon-cancel" immediate="true" ajax="false"/>
                    </h:form>



                    
                </f:view>

            </ui:define>

        </ui:composition>

    </body>
</html>
